<template>
	<view class="page">
		<view >
			<view style="background-color: #fff;width: 100%;">
				<view class="phonenumber">
					<span class="sp_1">亲友手机号 <span class="sp_2">*</span> </span>
								<input type="text" class="inp_1"  placeholder="请输入手机号" >
				</view>
				<view class="phonenumber">
					<span class="sp_1">亲友类型 <span class="sp_2">*</span> </span>
								<view class="select">
									<uni-data-select 
									       v-model="value"
									       :localdata="range"
									       @change="change"
										   placeholder="请选择亲友类型"
									     ></uni-data-select>
								</view>
								 
				</view>
			</view>
			

			 <button type="submit" class="bt_1">确认绑定</button>
			 <span class="more_num" @click="go_detail">查看已绑定账号</span>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				 value: 0,
				        range: [
				          { value: 0, text: "朋友" },
				          { value: 1, text: "家人" },
				          { value: 2, text: "伴侣" },
				        ],
			}
		},
		methods: {
			change(e) {
			        console.log("e:", e);
			      },
				  go_detail(){
					  uni.navigateTo({
					  	url:'/page_jiankangdangan/Family_detail/Family_detail'
					  })
				  }
		}
	}
</script>

<style scoped lang="scss">
	
	.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #F0F0F0;

		.phonenumber{
			width: 686rpx;
			height: 112rpx;
			border-bottom: 1rpx solid #E7E7E7;
			margin-left: 32rpx;
			.sp_1{
				display: inline-block;
				margin-top: 32rpx;
				font-weight: 400;
				width: 200rpx;
				height: 48rpx;
				float: left;
				font-size: 32rpx;
				line-height: 48rpx;
				.sp_2{
					color: red;
				}
			}
			.inp_1{
				float: right;
				height: 70rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				padding-left: 10rpx;
				border: 1rpx solid #e5e5e5;
			}
			.select{
				width: 350rpx;
				float: right;
				margin-top: 25rpx;
			}
			
		}
	.bt_1{
		width: 622rpx;
		height: 98rpx;
		background: #1677FF;
		margin: 200rpx auto  20rpx;
		font-size: 36rpx;
		font-family: Source Sans Pro, Source Sans Pro;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 98rpx;
	}
	.more_num{
		text-align: center;
        border-color: #e5e5e5;
		margin: 20rpx 0rpx 0rpx 38%;
		width: 250rpx;
		height: 40rpx;
		background-color: #F0F0F0;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: Source Sans Pro, Source Sans Pro;
		font-weight: 400;
		color: #1677FF;
	}
	}
</style>